<template>
  <div class="imUi-container" :style="style">
    <ToolBar  @tool-click="onEventToolClick" />
    <ListWrapper :active-menu="activeMenu" />
    <BoxWrapper />
    <ContextMenu />
    <ResizeContainer />
  </div>
</template>

<script lang="tsx">
import { defineComponent, ref} from "vue";
import ToolBar from "./components/ToolBar.vue";
import ListWrapper from "./components/ListWrapper/Index.vue";
import BoxWrapper from "./layout/BoxWrapper/Index.vue";
import ContextMenu from "./common/ContextMenu/Index.vue";
import ResizeContainer from "./common/ResizeContainer/Index.vue";
import { useCollectStore } from "../../store";

export default defineComponent({
  components: {
    ToolBar,
    ListWrapper,
    BoxWrapper,
    ContextMenu,
    ResizeContainer
  },
  props: {
    style: {
      type: Object,
      default: () => {
        return {
          width: `900px`,
          height: `750px`,
        }
      }
    }
  },
  setup() {
   const activeMenu = ref("");
    const onEventToolClick = (type) => {
      activeMenu.value = type;
    }

    return {
      onEventToolClick,
      activeMenu,
    }
  }
})
</script>
<style>
@import url(//at.alicdn.com/t/c/font_4200334_7n3az5gz1m6.css);
</style>
<style lang="less" scoped>
.imUi-container {
  position: fixed;
  display: flex;
  box-shadow: 0 0 4px #333;
}
</style>
  